<template>
  <div :class="{'mobile-create': showMobilePage}" class="create-project">
    <Title :title="'项目信息'" font-size="16px" style="margin-bottom:16px;"/>
    <el-form ref="projectForm" :model="projectForm" :rules="projectRules" :label-position="formAlign" class="lineHeight32 mb8" label-width="110px">
      <el-row type="flex" class="response-el-row">
        <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item label="项目名称" prop="projectName">
            <el-input v-model.trim="projectForm.projectName" name="projectName" type="text" placeholder="请输入项目名称，不超过50字" size="small" maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item label="创建人" prop="creator">
            <el-input v-model="projectForm.creator" name="creator" type="text" size="small" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item label="项目总监" prop="projectDirectorId">
            <selectWithUserLoad
              ref="selectProjectDirector"
              v-model="projectForm.projectDirectorId"
              :is-no-loading="true"
              :hide-select-list="hideSelectList"
              :default-list="defaultObjectUser || []"
              :extend-params="{
                perPage: 20,
                type: 1,
                authUrl: 'crm:project:firstTrial'
              }"
              key-name="id"
              show-check-user
              label-name="userName"
              clearable
              filterable/>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item label="立项日期" prop="projectApprovalDate">
            <el-date-picker v-model="projectForm.projectApprovalDate" :clearable="true" :editable="false" type="date" size="small" value-format="timestamp" format="yyyy/MM/dd" placeholder="选择日期" />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item label="品牌名称" prop="brandName">
            <el-input v-model.trim="projectForm.brandName" name="brandName" placeholder="请输入品牌名称，限制50字" type="text" size="small" maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item label="所属部门" prop="departmentName">
            <el-cascader
              v-model="projectForm.departmentId"
              :show-all-levels="false"
              :options="deptTreeList"
              :props="{
                emitPath:false,
                value: 'id',
                label: 'name',
                checkStrictly: true,
                multiple: false,
              }"
              placeholder="请选择所属部门"
              size="small"
              filterable
              collapse-tags
              clearable
            >
              <template slot-scope="{ data }">
                <el-tooltip v-if="data.name.length > 14" placement="top-start" effect="dark">
                  <div slot="content" style="max-width: 150px;">{{ data.name }}</div>
                  <span class="inline-tag ellipsisOne">{{ data.name }}</span>
                </el-tooltip>
                <span v-else>{{ data.name }}</span>
              </template>
            </el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item label="结案日期" prop="finishDate">
            <el-date-picker v-model="projectForm.finishDate" :clearable="true" :editable="false" type="date" size="small" value-format="timestamp" format="yyyy/MM/dd" placeholder="选择日期" />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item label="标签" prop="tag" style="margin-bottom: 0">
            <TagSelect v-model="projectForm.tag" :collapse-tags="false" :module-type="TAG_MODULES.PROJECT"/>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item label="项目备注" prop="projectRemark">
            <el-input v-model="projectForm.projectRemark" name="projectRemark" placeholder="请输入项目备注，限制200字" type="text" size="small" maxlength="200" />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item label="执行人(商务侧)" prop="businessCooperation">
            <selectWithUserLoad
              v-model="projectForm.businessCooperation"
              :is-no-loading="true"
              :multiple="true"
              :collapse-tags="false"
              :default-list="defaultCooperUser || []"
              :extend-params="{
                isOnlyOperator: true,
                jobStatus: 1
              }"
              value-type="object"
              key-name="id"
              show-check-user
              label-name="userName"
              clearable
              filterable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item label="执行人(资源侧)" prop="resourceCooperation">
            <div class="flex-center">
              <selectWithUserLoad
                v-model="projectForm.resourceCooperation"
                :is-no-loading="true"
                :multiple="true"
                :collapse-tags="false"
                :default-list="defaultResourceCooperation || []"
                :extend-params="{
                  isOnlyResourceOperator: true
                }"
                value-type="object"
                key-name="id"
                show-check-user
                label-name="userName"
                clearable
                filterable
              />
              <el-tooltip placement="top">
                <div slot="content">资源侧不可填写签约组人员与商务侧人员</div>
                <tipIcon is-diy class="ml5"/>
              </el-tooltip>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <Title v-if="clientInfoAuth" :title="'客户信息'" font-size="16px" style="margin-bottom:16px;"/>
    <el-form v-if="clientInfoAuth" ref="customerForm" :model="projectForm" :rules="projectRules" :label-position="formAlign" class="lineHeight32 mb8" label-width="110px">
      <el-row type="flex" class="response-el-row">
        <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item label="客户名称" prop="clientId">
            <el-select
              v-model="projectForm.clientId"
              :remote-method="searchClientName"
              :loading="loading1"
              :disabled="!hasRouteAuth('crm:projectInfo:clientInfoEdit')"
              class="filterableSelect remoteRequestClient"
              popper-class="global-select-down select-width240"
              filterable
              remote
              placeholder="请输入或选择客户名称"
              size="small"
              @change="clientData">
              <el-option :value="-9999" class="select-extend-btn" disabled>
                <div class="select-extend-btn-text" @click="addNewClick">添加新客户</div>
              </el-option>
              <el-option
                v-if="projectForm.clientId"
                :key="'hide'+projectForm.clientId"
                :title="projectForm.clientName"
                :label="projectForm.clientName"
                :value="projectForm.clientId"
                style="display:none;"/>
              <el-option
                v-for="item in clientNameOp"
                :key="item.id"
                :title="item.value"
                :label="item.value"
                :value="item.id"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item label="客户联系人" prop="contactPersonId">
            <selectWithoutHttp
              v-model="projectForm.contactPersonId"
              :remote-method="contactList"
              :default-list="defaultContactPersonOption"
              :list-data="personList"
              :disabled="!hasRouteAuth('crm:projectInfo:clientInfoEdit') || !projectForm.clientId"
              filterable
              remote
              placeholder="搜索匹配"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item label="客户类型">
            <el-input v-model="clientType" size="small" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item label="客户性质" prop="customerProperty">
            <el-select v-model="projectForm.customerProperty" :disabled="!hasRouteAuth('crm:projectInfo:clientInfoEdit')" name="customerProperty" popper-class="global-select-down" size="small">
              <el-option
                v-for="item in clientTypeOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item :class="actualClientRequired && 'required-label'" label="实际客户名称" prop="actualClientId">
            <el-select
              v-model="projectForm.actualClientId"
              :remote-method="searchClientName"
              :loading="loading1"
              :disabled="!hasRouteAuth('crm:projectInfo:clientInfoEdit')"
              class="filterableSelect remoteRequestClient"
              popper-class="global-select-down select-width240"
              filterable
              remote
              clearable
              placeholder="请输入或选择客户名称"
              size="small"
              @change="clientData($event, true)">
              <el-option :value="-9999" class="select-extend-btn" disabled>
                <div class="select-extend-btn-text" @click="addNewClick">添加新客户</div>
              </el-option>
              <el-option
                v-if="projectForm.actualClientId"
                :key="'hide'+projectForm.actualClientId"
                :title="projectForm.actualClient"
                :label="projectForm.actualClient"
                :value="projectForm.actualClientId"
                style="display:none;"/>
              <el-option
                v-for="item in clientNameOp"
                :key="item.id"
                :title="item.value"
                :label="item.value"
                :value="item.id"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item label="实际客户联系人" prop="actualContactPersonId">
            <selectWithoutHttp
              v-model="projectForm.actualContactPersonId"
              :remote-method="getActualContactList"
              :default-list="defaultActualPersonOption"
              :list-data="actualPersonList"
              :disabled="!hasRouteAuth('crm:projectInfo:clientInfoEdit') || !projectForm.actualClientId"
              filterable
              remote
              clearable
              placeholder="搜索匹配"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item label="所属集团" prop="actualContactPersonId">
            <el-input v-model="group" size="small" disabled placeholder="客户所属集团"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <Title :title="'预计到款'" :class="{'mobile-title':showMobilePage}" font-size="16px" style="margin-bottom:16px">
      <span class="title-tip">设置预计到款日期和金额后，到期可进行预警通知</span>
    </Title>
    <el-form v-for="(item, index) in projectForm.receivePay" :key="index" :label-position="formAlign" :label-width="showMobilePage?'95px':'135px'" class="lineHeight32">
      <el-form-item :label="`预计到款(第${index+1}期)`" :required="true">
        <div :class="{'mobile-flex': showMobilePage}" class="flex-center">
          <el-date-picker
            v-model="item.date"
            :editable="false"
            clearable
            type="date"
            size="small"
            class="width240"
            value-format="timestamp"
            format="yyyy/MM/dd"
            placeholder="选择日期" />
          <div class="width10" />
          <el-input v-model="item.returnMoney" placeholder="请输入回款金额" size="small" maxlength="12" class="width240" @input="numInputChange($event, item)">
            <i slot="suffix" style="color:#333">元</i>
          </el-input>
          <div v-if="projectForm.receivePay.length > 1" class="mr10 ml10 bold-text" @click="handleDelete(index)">删除</div>
          <div class="ml10 bold-text light-text" @click="handleAdd">添加</div>
        </div>
      </el-form-item>
    </el-form>
    <fixed-pagination>
      <div class="center">
        <el-button :loading="loading" type="primary" size="small" @click="toSave()">{{ projectId ? '保存' : '创建项目' }}</el-button>
        <el-button type="info" size="small" class="cancel-btn-style" @click="toClear">取消</el-button>
      </div>
    </fixed-pagination>
  </div>
</template>
<script>
import Title from '@/components/Title';
import selectWithoutHttp from '@/components/Common/selectWithoutHttp';
import selectWithUserLoad from '@/components/Common/selectWithUserLoad';
import TagSelect from '@/components/Common/tagSelect';
import { clientStatusFilter } from '@/filters/status';
import { standardFormat } from '@/filters/date';
import { projectAdd, projectEdit, projectListInfo } from '@/api/project';
import { getContact, getClientName } from '@/api/select';
import { getDepartmentAll } from '@/api/config';
import { mapState } from 'vuex';
import { hasRouteAuth } from '@/utils/permission';
import { TAG_MODULES } from '@/utils/const';
import mobileCreate from '@/mixins/mobileCreate';
import ElMessage from '@/utils/message';

export default {
  components: { Title, selectWithUserLoad, selectWithoutHttp, TagSelect },
  filters: { clientStatusFilter, standardFormat },
  mixins: [mobileCreate],
  data() {
    const validateDate = (rule, value, callback) => {
      const projectApprovalDate = standardFormat(this.projectForm.projectApprovalDate / 1000, 'YYYY-MM-DD');
      const finishDate = standardFormat(value / 1000, 'YYYY-MM-DD');
      if (!value) {
        callback();
      } else if (projectApprovalDate !== finishDate) {
        if (this.projectForm.projectApprovalDate - value > 0) {
          callback(new Error('结案日期不得早于立项日期'));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    const validateSelect = (msg) => {
      return (rule, value, callback) => {
        if (!value || value === '') {
          callback(new Error(msg));
        } else {
          callback();
        }
      };
    };
    return {
      TAG_MODULES,
      projectId: null,
      clientType: '公司',
      group: '',
      defaultContactPersonOption: [],
      defaultActualPersonOption: [],
      personList: [], // 联系人列表
      projectForm: {
        projectName: '',
        creator: '',
        creatorId: null,
        departmentName: '',
        departmentId: '',
        projectDirectorId: '',
        projectApprovalDate: new Date(new Date().toLocaleDateString()).getTime(),
        finishDate: null,
        receivePay: [{ date: '', returnMoney: '' }],
        clientId: null,
        customerProperty: null,
        brandName: '',
        projectRemark: '',
        contactPersonId: '',
        cooperation: [],
        resourceCooperation: [],
        businessCooperation: [],
        tag: [],
        actualClientId: '',
        actualContactPersonId: ''
      },
      actualClientRequired: 0,
      projectRules: {
        projectName: [{ required: true, trigger: 'blur', message: '请填写项目名称' }],
        projectApprovalDate: [{ required: true, trigger: 'change', message: '请选择立项日期' }],
        clientId: [{ required: true, trigger: 'change', message: '请选择客户名称' }],
        customerProperty: [{ required: true, trigger: 'change', message: '请选择客户性质' }],
        brandName: [{ required: true, trigger: 'change', message: '请填写品牌名称' }],
        finishDate: [{ trigger: 'change', validator: validateDate }],
        contactPersonId: [{ required: true, trigger: 'change', validator: validateSelect('请选择客户联系人') }]
      },
      clientTypeOption: [{ value: 1, label: '直客' }, { value: 0, label: '非直客' }],
      loading: false,
      loading1: false,
      clientNameOp: [],
      deptTreeList: [], // 所属部门列表
      defaultObjectUser: [], // 项目总监
      defaultCooperUser: [], // 默认协作人列表
      defaultResourceCooperation: [], // 默认协作人列表
      hideSelectList: [],
      actualPersonList: []
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo
    }),
    isAdmin() {
      return this.userInfo.userName === '管理员';
    },
    clientInfoAuth() {
      return this.hasRouteAuth('crm:projectInfo:clientInfo') || this.isAdmin;
    }
  },
  watch: {
    'actualClientRequired': {
      handler(val) {
        if (val) {
          const validateSelect = (msg) => {
            return (rule, value, callback) => {
              if (!value || value === '') {
                callback(new Error(msg));
              } else {
                callback();
              }
            };
          };
          this.projectRules.actualClientId = [{ required: true, trigger: 'change', validator: validateSelect('请选择实际客户') }];
        } else if (this.projectRules.actualClientId) {
          delete this.projectRules.actualClientId;
          this.$refs.customerForm.clearValidate('actualClientId');
        }
      }
    }
  },
  mounted() {
    window.remoteRequest('.remoteRequestClient', this.clientNameList);
  },
  created() {
    this.projectId = this.$route.params.id;
    this.loadResourceSelect();
    this.projectForm.creator = this.userInfo.userName;
    this.projectForm.creatorId = this.userInfo.id;
    if (this.projectId) {
      this.getInfo();
    } else {
      const { currentDepartment } = this.userInfo;
      if (Array.isArray(currentDepartment) && currentDepartment.length) {
        this.changeArr(currentDepartment, this.projectForm);
      }
    }
  },
  methods: {
    hasRouteAuth,
    numInputChange(text, item) {
      let str;
      str = text.replace(/^0/g, ''); // 不允许0开头
      str = str.replace(/[^\d.]/g, ''); // 只允许数字
      str = str.replace(/\.{2,}/g, '.'); // 连续两个小数点 replace为.
      str = str.replace(/^\./g, '0.'); // 已点为开头 replace为 0.
      str = str.replace(/^(\d*)\.(\d*)\./g, '$1.$2');// 不连续点点 删掉
      str = str.replace(/^(\-?\d+)\.(\d\d).*$/, '$1.$2'); // 只允许保留小数点后2位
      str = str === '' ? null : str;
      item.returnMoney = str;
    },
    clientNameList(query = null) {
      this.loading1 = true;
      const param = {
        clientName: query,
        isGetMengliClient: false
      };
      getClientName(param).then(res => {
        this.loading1 = false;
        this.clientNameOp = res.data;
      }, result => {
        this.loading1 = false;
      });
    },
    loadResourceSelect() {
      this.clientNameList();
      this.queryDeptTreeList();
    },
    queryDeptTreeList() {
      getDepartmentAll().then(res => {
        this.deptTreeList = (res && res.data) || [];
      }).catch(e => {
        console.log(e);
      });
    },
    changeArr(deptName, data) {
      data.departmentId = deptName.map(i => i.id)[0];
    },
    getInfo() {
      projectListInfo(this.projectId).then(res => {
        if (res.data.department && res.data.department.length) this.changeArr(res.data.department, res.data);
        this.projectForm = { ...this.projectForm, ...res.data };
        this.projectForm.projectApprovalDate = this.projectForm.projectApprovalDate ? this.projectForm.projectApprovalDate * 1000 : null;
        this.projectForm.finishDate = this.projectForm.finishDate ? this.projectForm.finishDate * 1000 : null;
        if (this.projectForm.receivePay && this.projectForm.receivePay.length) {
          this.projectForm.receivePay.forEach(item => {
            item.date = item.date * 1000;
          });
        } else {
          this.projectForm.receivePay = [{ date: '', returnMoney: '' }];
        }
        this.defaultCooperUser = res.data.businessCooperation;
        this.defaultResourceCooperation = res.data.resourceCooperation;
        this.clientType = clientStatusFilter(res.data.clientType);
        this.group = res.data.group;
        if (res.data.projectDirectorId) {
          this.hideSelectList.push({ id: res.data.projectDirectorId, userName: res.data.projectDirector });
        } // 项目总监接口返回较慢，在接口返回之前先设置为总监名称
        if (this.projectForm.clientId) {
          this.contactList();
          this.getActualContactList();
        }
      });
    },
    // 查询客户名称列表
    searchClientName(query) {
      this.clientNameList(query);
    },
    // 选择客户名称触发change事件
    clientData(id, isActual = false) {
      if (typeof id === 'number') {
        const item = this.clientNameOp.find(j => j.id === id);
        this.clientType = clientStatusFilter(item.clientType);
        this.group = item.group;
        this.clientIdChange(id, isActual);
      } else {
        // 清空实际客户时，需要清除实际联系人
        this.projectForm.actualContactPersonId = '';
        this.actualPersonList = [];
        this.group = '';
      }
    },
    clientIdChange(val, isActual = false) {
      isActual ? this.getActualContactList() : this.contactList();
      this.projectForm[isActual ? 'actualContactPersonId' : 'contactPersonId'] = '';
    },
    /** 客户联系人列表:与客户联动 */
    contactList(query = null) {
      this.contactListLoading = true;
      getContact(this.projectForm.clientId, query).then(res => {
        this.contactListLoading = false;
        this.personList = res.data;
        this.actualClientRequired = res.data[0].actualClientRequired;
      }, result => {
        this.contactListLoading = false;
      });
    },
    /** 实际客户联系人列表：与实际客户联动 */
    getActualContactList(query = null) {
      getContact(this.projectForm.actualClientId, query).then(res => {
        this.actualPersonList = res.data;
      });
    },
    addNewClick() {
      if (!this.hasRouteAuth('crm:customer:add')) {
        this.$message.error('您暂无新增客户权限');
        return;
      }
      const routeUrl = this.$router.resolve({ name: 'createCustomer' });
      window.open(routeUrl.href, '_blank');
    },
    handleDelete(index) {
      this.projectForm.receivePay.splice(index, 1);
    },
    handleAdd() {
      if (this.projectForm.receivePay.length === 12) {
        ElMessage.warning('最多只允许添加12期预计到款！');
        return;
      }
      this.projectForm.receivePay.push({ date: '', returnMoney: '' });
    },
    toAdd(params) {
      projectAdd(params).then(res => {
        this.loading = false;
        this.$message.success('添加成功');
        this.$router.push({
          name: 'projectList'
        });
      }, result => {
        this.loading = false;
      });
    },
    toEdit(params) {
      projectEdit(this.projectId, params).then(res => {
        this.loading = false;
        this.$message.success('修改成功');
        localStorage.setItem('isSuccess', true);
        localStorage.setItem('changeData', JSON.stringify(this.projectForm));
        this.$router.push({
          name: 'projectDetail',
          params: { id: this.projectId }
        });
      }, result => {
        this.loading = false;
      });
    },
    // 校验条件是否填写完整
    validateReceivePay() {
      const temp = this.projectForm.receivePay.every(item => {
        const values = Object.values(item);
        // 每个都不为空，填了，false则为没填
        return values.every(i => i);
      });
      return temp;
    },
    toSave() {
      if (!this.validateReceivePay()) {
        ElMessage.warning('预计到款填写不完整！');
        return;
      }
      const projectFormValid = this.$refs['projectForm'] && this.$refs['projectForm'].validate();
      const customerFormValid = this.$refs['customerForm'] && this.$refs['customerForm'].validate();
      const arr = [];
      projectFormValid && arr.push(projectFormValid);
      customerFormValid && arr.push(customerFormValid);
      const p = Promise.all(arr);
      p.then(res => {
        const params = JSON.parse(JSON.stringify(this.projectForm));
        if (params.departmentId) {
          params.departmentId = `${params.departmentId}`;
        }
        if (params.projectApprovalDate) params.projectApprovalDate = params.projectApprovalDate / 1000;
        if (params.finishDate) params.finishDate = params.finishDate / 1000;
        if (params.businessCooperation && params.businessCooperation.length) {
          params.businessCooperation = params.businessCooperation.map(item => {
            item = {
              id: item.id,
              userName: item.userName
            };
            return item;
          });
        }
        if (params.resourceCooperation && params.resourceCooperation.length) {
          params.resourceCooperation = params.resourceCooperation.map(item => {
            item = {
              id: item.id,
              userName: item.userName
            };
            return item;
          });
        }
        if (params.receivePay) {
          params.receivePay.forEach(item => {
            item.date /= 1000;
          });
        }
        this.loading = true;
        if (this.projectId) {
          this.toEdit(params);
        } else {
          this.toAdd(params);
        }
      }).catch(_ => {
        this.loading = false;
      });
    },
    toClear() {
      localStorage.setItem('isSuccess', false);
      localStorage.setItem('changeData', '');
      this.$router.push({
        name: 'projectList'
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.create-project {
  padding: 24px;
  background-color: #fff;
  margin: 16px;
  min-height: calc(100vh - 80px);
  & ::v-deep {
    .el-form-item {
      .el-select {
        width: 240px;
      }
      .el-input__inner  {
        width: 240px;
      }
      .el-textarea__inner {
        height: 64px !important;
      }
      .el-form-item__label {
        color: #666;
        height: 32px;
      }
    }
  }
  .width240 {
    width: 240px;
    &::v-deep {
      .el-input__inner {
        width: 240px;
      }
    }
  }
  .width10 {
    width: 10px;
  }
  .mr10 {
    margin-right: 10px;
  }
  .ml10 {
    margin-left: 10px;
  }
  .bold-text {
    font-size: 14px;
    font-weight: bold;
    color: #192452;
    cursor: pointer;
  }
  .light-text {
    color: #406eff;
  }
  .required-label {
    ::v-deep {
      .el-form-item__label {
        &::before {
          content: "*";
          color: #F56C6C;
          margin-right: 4px;
        }
      }
    }
  }
}
.title-tip {
  font-size: 12px;
  color: #999;
  font-weight: normal;
  margin-left: 10px;
}
.select-extend-btn {
  cursor: pointer;
  border-bottom: 1px solid #ddd;
  .select-extend-btn-text {
    color: #406eff;
  }
}
.select-width240 {
  max-width: 240px;
}
.mobile-title {
  margin: 32px 0 22px;
}
.mobile-flex {
  flex-wrap: wrap;
  ::v-deep {
    .el-date-editor {
      margin-bottom: 10px;
    }
  }
}
.mb8 {
  margin-bottom: 8px;
}
</style>
